<template>
    <a-form class="smart-query-form">
        <a-row class="smart-query-form-row">
            <a-form-item label="" class="smart-query-form-item" name="accountName">
                <a-input v-model:value="searchParam.accountName" placeholder="请输入编码或名称" />
            </a-form-item>

            <a-form-item class="smart-query-form-item smart-margin-left10">
                <a-button type="primary" @click="search">
                    <template #icon>
                        <SearchOutlined />
                    </template>
                    查询
                </a-button>
                <!-- <a-button @click="reset" style="margin-left: 6px;">
                    <template #icon>
                        <ReloadOutlined />
                    </template>
                    重置
                </a-button> -->
            </a-form-item>
        </a-row>
    </a-form>
    <a-card size="small" :bordered="false" :hoverable="true">
        <a-row class="smart-table-btn-block">
            <div class="smart-table-operate-block">
                <a-button @click="showForm()" type="primary" size="small">
                    <template #icon>
                        <PlusOutlined />
                    </template>
                    新增账户
                </a-button>
                <!-- <a-button @click="confirmBatchDelete" danger size="small" :disabled="selectedRowKeys.length == 0">
                    <template #icon>
                        <DeleteOutlined />
                    </template>
                    批量删除
                </a-button> -->
            </div>
            <div class="smart-table-setting-block">
                <TableOperator v-model="columns" :tableId="null" :refresh="reset" />
            </div>
        </a-row>
        <a-table :scroll="{ x: 1000 }" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            size="small" :dataSource="tableData" :columns="columns" rowKey="id" :pagination="false"
            :loading="tableLoading" bordered>
            <template #bodyCell="{ column, record, text }">
                <template v-if="column.dataIndex === 'action'">
                    <div class="smart-table-operate">
                        <a-button @click="showForm(record)" type="link">修改</a-button>
                    </div>
                </template>
            </template>
        </a-table>
        <div class="smart-query-table-page">
            <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                :defaultPageSize="pageable.pageSize" v-model:current="pageable.pageNum"
                v-model:pageSize="pageable.pageSize" :total="pageable.total" @change="handleSizeChange"
                :show-total="(total) => `共${total}条`" />
        </div>
        <bankDepositFormModal ref="baseFormRef" @refresh="ajaxQuery" />
        <UpdateFormModal ref="updateFormModal" @refresh="ajaxQuery" />
    </a-card>
</template>
<script setup>
import { ref, computed } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { useTable } from '/@/hooks/useTable';
import { useHandleData } from '/@/hooks/useHandleData';
import bankDepositFormModal from './components/bankcash-form-modal.vue';
// import TableOperator from '/@/components/support/table-operator/index.vue';

const {
    tableData,
    pageable,
    searchParam,
    searchInitParam,
    isShowPage,
    getTableList,
    search,
    reset,
    tableLoading,
    handleSizeChange,
} = useTable(); // 你需要根据实际API替换useTable参数
tableData.value  =   [
    {
        code: '1001',
        bankType: 'ICBC 工商银行',
        accountName: '工商银行-张三',
        bankAccount: '6222021234567890',
        initDate: '2024-01-01',
        accountSubject: '100201 银行存款-工商银行',
        assistItem: '无',
    },
    {
        code: '1002',
        bankType: 'ABC 农业银行',
        accountName: '农业银行-李四',
        bankAccount: '6228481234567891',
        initDate: '2024-02-01',
        accountSubject: '100202 银行存款-农业银行',
        assistItem: '无',
    },
    {
        code: '1003',
        bankType: 'J 交通银行',
        accountName: '交通银行-王五',
        bankAccount: '6222601234567892',
        initDate: '2024-03-01',
        accountSubject: '100203 银行存款-交通银行',
        assistItem: '无',
    }


]       
    
const columns = ref([
    { title: '编码', dataIndex: 'code' },
    { title: '账户名称', dataIndex: 'bankType' },
    { title: '保管人', dataIndex: 'accountName' },
    { title: '账号', dataIndex: 'bankAccount' },
    { title: '初始化日期', dataIndex: 'initDate' },
    { title: '会计科目', dataIndex: 'accountSubject' },
    { title: '辅助项目', dataIndex: 'assistItem' },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 100,
    },
]);

let selectedRowKeys = ref([]);
let selectedRows = ref([]);
const hasSelected = computed(() => selectedRowKeys.value.length > 0);

function onSelectChange(keyArray, selectRows) {
    selectedRowKeys.value = keyArray;
    selectedRows.value = selectRows;
}

const baseFormRef = ref();
function showForm(data) {
    baseFormRef.value.showModal(data);
}

async function confirmDelete(row) {
    let params = { id: row.id };
    await useHandleData(null, params, '确认删除吗'); // 替换null为实际API
}

function confirmBatchDelete() {
    Modal.confirm({
        title: '批量删除',
        content: '确认要批量删除选中的记录吗？',
        onOk: async () => {
            // 批量删除逻辑，替换为实际API
            await useHandleData(null, { ids: selectedRowKeys.value }, '批量删除');
            reset();
        },
    });
}
</script>
<style lang="less" scoped></style>
